<template>
  <div class="chat">
    <van-nav-bar
      title="尾号"
      left-arrow
      @click-left="onClickLeft"
    />
    <div id="liao">
      <div class="chat-container">
        <div v-for="(message, index) in messagesList" :key="index" :class="message.sender == message.userId? 'messageuser' : 'messagedriver'">
          <div :class="message.sender == message.userId? 'chat-textborder-user' : 'chat-textborder-driver'">
<!--            <span v-if="message.sender === 'user'">{{ message.sender }}</span>-->
<!--            <span v-if="message.sender === 'driver'" class="chatdrivertest">{{ message.sender }}</span>-->
            <span>{{ message.content }}</span>
          </div>
        </div>
      </div>
      <div class="input-container">
        <button  @click="show = true" class="input-container-van">常用语</button>
        <input v-model="text" placeholder="输入消息" @keyup.enter="sendMessage">
        <button @click="sendMessage">发送</button>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '20%' }">
      <van-button class="shezhi" @click="changyou(c)" :key="c" v-model="chang" v-for="c in chang">{{c}}</van-button>
      <van-button class="shezhi" @click="show=false">取消</van-button>
    </van-popup>
  </div>
</template>
<script>
import axios from 'axios'
import { Toast } from 'vant'
export default {
  data() {
    return {
      show: false,
      text: '',
      chang:[
        '我会晚到几分钟，麻烦稍等我一下，谢谢!',
        '我即将到达出发点，请尽快做好上车准备!',
        '我已到达出发点，随时可以出发!',
        '谢谢'
      ],
      newMessage: {
        sender: '1',
        text: ''
      },
      form: {},
      phone: '',
      did:'',
      messagesList:[],
      id:''
    }
  },
  created() {
    console.log('abcdefghijklmnopqrstuvwxyz')
    this.findchat()
  },
  methods: {
    onClickLeft(){
      this.$router.push('/dcOrders')
    },
    changyou(c){
      this.text=c
      this.show = false
    },
    sendMessage() {
      if (this.text) {
        this.form.sender = JSON.parse(localStorage.getItem('did'))
        this.form.driverId = JSON.parse(localStorage.getItem('did'))
        this.form.userId = this.id
        this.form.content=this.text
        this.form.driverText = ''
        axios.post(`chat/chat/addchat`,this.form).then(res => {
          console.log(res)
          console.log('1111111111111111111111111')
          this.findchat()
          this.text = ''
        })
      }
    },
    findchat(){
      const phone=JSON.parse(localStorage.getItem('phone'))
      const did=JSON.parse(localStorage.getItem('did'))
      axios.get(`customer/customer/findPhone?phone=${phone}`).then(res => {
        this.id = res.data.id
        // console.log(res)
        // console.log(res.data.id)
        console.log(this.id+'afbavjkl;o8ji'+did)
        axios.get(`chat/chat/findchat?userId=${this.id}&&driverId=${did}`).then(res => {
          this.messagesList = res.data
          console.log(res)
          console.log(this.messagesList)
          console.log('idnfjgnndgffj')
        })
      })

    }
  }
}
</script>
<style scoped>
.chat{
  background-color: #F7F7F7;
  width: 100%;
  height: 100%;
}
.chatdrivertest{
  float: right;
}
.chattime{
  display: block;
  text-align: center;
}

.chat-container {
  display: block;
  flex-direction: column;
  border: 1px solid #ccc;
  width: 100%;
  height: 700px;
  overflow-y: scroll;
}
.shezhi{
  display: block;
  width: 100%;
  height: 50px;
}
.message {
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.chat-textborder-user{
  margin: 5px;
  background-color: #ffffff;
  padding-left: 10px;

  display: block;
  border-radius: 0 15px 15px 15px;
  float: left;
}
.chat-textborder-driver{
  margin: 5px;
  padding-left: 10px;
  padding-right: 10px;;
  display: block;
  border-radius: 15px 0 15px 15px;
  background-color: #0084ff;
  float: right;
}
.messageuser {
  width: 100%;
  margin-top: 10px;
  float: left;
  border-radius: 0 10px 10px 10px;
  align-self: flex-start;
}

.messagedriver {
  width: 100%;
  margin-top: 10px;
  float: right;
  color: white;
  align-self: flex-end;
}

.input-container {
  //float: left;
  width: 100%;
  //background-color: orange;
  position: fixed;
  bottom: 20px;
  display: block;
  margin-top: 10px;

}

.input-container input {
  border-radius: 5px;
  border-color: rgba(0, 0, 0, 0.1);
  width:50%;
  padding: 5px;
}
.input-container-van{
  position: relative;
  border-radius: 10px;
  width: 80px;
  background-color: #0a8e9c;
  display: inline-block;
  //margin-left: 10px;
  color: white;

  padding: 5px 10px;

}
.input-container button {
  border-radius: 10px;
  border-color: rgba(0, 0, 0, 0.1);
  background-color: #00b1ff;
  color: white;
  width: 80px;
  padding: 5px 10px;
}
#liao{
  position: relative;
  margin: 10px;
  width: 100%;
  height: 100%;
}
</style>
